<div class="module" id="moduleDreambooth">
    <div class="container-fluid">
        <div class="row">
            <div class="text-center justify-between">
                <button class="btn btn-top btn-secondary" type="button" id="db_load_params">Load Settings</button>
                <button class="btn btn-top btn-secondary" type="button" id="db_save_config">Save Settings</button>
                <button class="btn btn-top btn-primary" type="button" id="db_train">Train</button>
                <button class="btn btn-top btn-secondary" type="button" id="db_gen_ckpt">Generate Ckpt</button>
                <button class="btn btn-top btn-secondary hide" type="button" id="db_gen_ckpt_during">Save Weights</button>
                <button class="btn btn-top btn-secondary hide" type="button" id="db_train_sample">Generate Samples</button>
                <button class="btn btn-top btn-secondary hide" type="button" id="db_cancel">Cancel</button>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-4">
                <div class="card shadow" id="dreamModel">
                    <div class="card-header">Model</div>
                    <div class="card-body">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="db-model-select-tab" data-bs-toggle="tab"
                                        data-bs-target="#db-model-select" type="button" role="tab"
                                        aria-controls="db-model-select"
                                        aria-selected="true">Select
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="db-model-create-tab" data-bs-toggle="tab"
                                        data-bs-target="#db-model-create"
                                        type="button" role="tab" aria-controls="profile" aria-selected="false">Create
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="db-model-select" role="tabpanel"
                                 aria-labelledby="db-model-select">

                                <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <div id="dreamModelSelect" class="modelSelect" data-model_type="dreambooth" data-label="Model"></div>
                                        </div>
                                        <div class="col-12">
                                            <div id="snapshotSelect" class="modelSelect" data-model_type="dreamboothSnapshot" data-label="Snapshot to Resume"></div>
                                        </div>
                                    </div>
                                    <div class="row" style="display: none;" id="loraSelect">
                                        <div class="col-12">
                                            <div id="loraModelSelect" class="modelSelect" data-model_type="lora" data-label="Lora Model"></div>
                                        </div>
                                    </div>
                                    <div class="row" id="modelDetails">
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="db-model-create" role="tabpanel"
                                 aria-labelledby="db-model-create">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="db_new_model_name">Name</label>
                                                <input type="text" class="form-control newModelParam" id="db_new_model_name" data-key="new_model_name">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input newModelParam" id="db_create_from_hub" data-key="create_from_hub">
                                                <label class="form-check-label" for="db_create_from_hub">Create From
                                                    Hub</label>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input newModelParam" id="db_512_model" data-key="512_model"
                                                       checked>
                                                <label class="form-check-label" for="db_512_model">512x Model</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group" style="display: none;" id="hub_row">
                                                <label for="db_new_model_url">Model Path</label>
                                                <input type="text" class="form-control newModelParam" id="db_new_model_url"
                                                       placeholder="runwayml/stable-diffusion-v1-5" data-key="new_model_url">
                                                <label for="db_new_model_token">HuggingFace Token</label>
                                                <input type="text" class="form-control newModelParam" id="db_new_model_token" data-key="new_model_token"
                                                       value="">
                                            </div>
                                            <div class="form-group" id="local_row">
                                                <div class="modelSelect"
                                                     id="db_new_model"
                                                     data-add_class="newModelParam"
                                                     data-model_type="diffusers"
                                                     data-label="Source Checkpoint"
                                                     data-key="new_model_src"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input newModelParam"
                                                       id="db_new_model_extract_ema" data-key="new_model_extract_ema">
                                                <label class="form-check-label" for="db_new_model_extract_ema">Extract
                                                    EMA Weights</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input newModelParam" id="db_train_unfrozen" data-key="train_unfrozen">
                                                <label class="form-check-label" for="db_train_unfrozen">Unfreeze
                                                    Model</label>
                                            </div>
                                        </div>
                                        <div class="col-12 text-center">
                                            <button class="btn btn-primary" type="button" id="db_create_model">Create
                                                Model
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card shadow" id="dreamSettings">
                    <div class="card-header">
                        Input
                    </div>
                    <div class="card-body">

                    </div>
                </div>
            </div>
            <div class="col-14 col-md-4">
                <div class="card shadow" id="dreamStatus">
                    <div class="card-header">
                        Output
                    </div>
                    <div class="card-body">
                        <div class="progressGroup" id="dreamProgress"></div>
                        <div class="image-container inline-gallery-container" id="dreamGallery"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>